<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 搜索表单 -->
      <SearchForm
      @refresh="getList"
      ref="SearchForm"
      :name="name"
      @doSearch="handleSearch"
      @open="openDialog"
      ></SearchForm>
      <!-- 提示框 -->
      <el-alert
      v-if="cResultTip"
      :title="cResultTip"
      type="info"
      class="alert"
      :closable="false"
      show-icon
        ></el-alert>
      <!-- 表格 -->
      <el-table
        :data="tableData"
        v-loading="isLoading"
        element-loading-text="给我一点时间"
        fit
        highlight-current-row
        style="width: 100%"
        >
        <el-table-column
          label="序号"
          width="50"
          type="index"
          >
        </el-table-column>
        <el-table-column
          label="学科名称"
          width="200">
          <template slot-scope="scope">
            <span>{{scope.row.subjectName}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="创建者"
          width="200">
          <template slot-scope="scope">
            <span>{{scope.row.creatorID}}</span>
          </template>
        </el-table-column>
        <el-table-column
           label="创建日期"
           width="200">
          <template slot-scope="scope">
            <span>{{scope.row.addDate}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="前台是否显示"
          width="150">
          <template slot-scope="scope">
            <span v-if="scope.row.isFrontDisplay==1">是</span>
            <span v-else>否</span>
          </template>
        </el-table-column>
        <el-table-column
            label="二级目录"
            width="200">
            <template slot-scope="scope">
              <span>{{scope.row.twoLevelDirectory}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="标签"
            width="200">
            <template slot-scope="scope">
              <span>{{scope.row.tags}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="题目数量"
            width="200">
             <template slot-scope="scope">
              <span>{{scope.row.totals}}</span>
            </template>
           </el-table-column>
           <el-table-column
            fixed="right"
            prop="handle"
            label="操作"
            width="240">
             <template slot-scope="scope">
               <el-button  type="text" size="small" @click="subjectClassify(scope.row.subjectName,1)">学科分类</el-button>
               <el-button type="text" size="small" @click="subjectClassify(scope.row.subjectName,0)">学科标签</el-button>
               <el-button type="text" size="small"  @click="edit(scope.row)">修改</el-button>
               <el-button type="text" size="small" @click="del(scope.row)">删除</el-button>
             </template>
          </el-table-column>
      </el-table>
      <!-- end -->
      <!-- 分页 -->
      <PageTool
      class="pagination"
      @pageChange="handleCurrentChange"
      @pageSizeChange="handleSizeChange"
      :total="totals"
      :paginationPage="queryParams.page"
      :paginationPagesize="queryParams.pagesize"
      ></PageTool>
      <!-- end -->
      </el-card>
      <!-- 弹窗 -->
      <el-dialog
      width="30%"
      :title="currentData?'编辑学科':'新增学科'"
      :visible.sync="isShowDialog"
      v-if="isShowDialog" >
      <SubjectAddOrEdit
      @close="isShowDialog=false"
      @refresh="getList"
      :current-data="currentData"
      ></SubjectAddOrEdit>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import SearchForm from './components/search-form.vue'
import { list, remove } from '@/api/hmmm/subjects'
import { parseTime } from '@/utils/index'
import SubjectAddOrEdit from '../components/subjects-add-or-edit.vue'
import PageTool from '../../module-dashboard/components/pageTool.vue'
export default {
  components: { SubjectAddOrEdit, SearchForm, PageTool },
  data () {
    return {
      name: '学科',
      currentData: null,
      isShowDialog: false,
      isLoading: false,
      totals: 0,
      formInline: {
        subjectName: ''
      },
      tableData: [],
      queryParams: {
        page: 1,
        pagesize: 10,
        subjectName: ''
      }
    }
  },
  created () {
    // 调用获取列表方法
    this.getList()
  },
  computed: {
    // 提示框数据
    cResultTip () {
      return `一共 ${this.totals} 条数据`
    }
  },
  methods: {
    // 搜索
    handleSearch (val) {
      this.queryParams.subjectName = val ? val.name : ''
      this.getList()
    },
    // 获取科目列表
    async getList () {
      try {
        this.isLoading = true
        const res = await list(this.queryParams)
        console.log(res)
        this.tableData = res.data.items.reverse()
        this.totals = res.data.counts
        console.log(this.tableData)
        this.tableData.forEach(item => {
          item.addDate = parseTime(item.addDate)
        })
        this.isLoading = false
      } catch (error) {
        console.log(error)
        this.isLoading = true
      }
    },
    // 每页显示信息条数
    handleSizeChange (val) {
      this.queryParams.pagesize = val
      if (this.queryParams.page === 1) {
        this.getList(this.queryParams)
      }
    },
    // 进入某一页
    handleCurrentChange (val) {
      this.queryParams.page = val
      this.getList()
    },
    // 打开弹窗
    openDialog () {
      this.currentData = null
      this.isShowDialog = true
    },
    // 清除搜索表单
    reset () {
      console.log(1)
      console.log(this.$refs.formInline)
      this.formInline.subjectName = ''
      // resetFields()未生效
      this.$refs.formInline.resetFields()
      this.getList()
    },
    // 搜索功能
    async doSearch () {
      if (!this.formInline.subjectName) {
        return this.$message.error('学科名称不能为空')
      }
      this.queryParams.subjectName = this.formInline.subjectName
      this.getList()
    },
    // 修改功能
    edit (val) {
      this.isShowDialog = true
      this.currentData = val
    },
    // 删除功能
    del (val) {
      this.$confirm('此操作将永久删除该学科, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove(val)
        if (this.tableData.length === 1 && this.queryParams.page > 1) {
          this.queryParams.page--
        }
        this.getList()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    async subjectClassify (name, type) {
      console.log(name)
      this.$router.push(
        {
          path: type === 1 ? 'directorys' : 'tags',
          query: { subjectName: name }
        })
    }

  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.demo-form-inline{
  display: flex;
  justify-content: space-between;
}
.alert {
  margin: 10px 0px;
}
.pagination {
  float: right;
  margin-top: 20px;
  margin-bottom: 20px;
}
</style>

<style>
.el-table th {
  background-color: #fafafa;
}
.el-table th.is-leaf {
  border-bottom: 2px solid #e8e8e8;
}
.disabled td {
  background-color: #f9f9f9;
  color: #c1c1c1;
}
.disabled .el-button--primary,
.disabled .el-button--danger {
  background-color: #dbdada;
  border: 1px solid #dbdada;
  color: #999;
  cursor: not-allowed;
}
</style>
